﻿/** 
下拉树 
*/
(function ($) {
    var defaults = {
        idLabel: "code",
        textLabel: "name",
        pidLabel: "pid",
        transition: "ztree",
        items: []
    };
    /** 
      target:input element;         
    */
    function DropTree(target, options) {
        this.target = target;
        this.value = target.value;
        this.$target = $(target);
        this.opts = $.extend({}, defaults, options, this.$target.data());
        this.id = this.target.id || this.target.name;
        if (this.$target.length > 0) {
            this._init();
        }
        
        return this;
    }

    DropTree.prototype._init = function () {
        var self = this;
        this.$target.hide();
        this.$wrap = this.$target.wrap('<div class="mfs-container">').parent();
        this.$selected = $('<a class="mfs-selected-option" href="#" />').prependTo(this.$wrap);

        //this.$selected.css("height",15); 
        this.$selected.html(this.value + " ");
        this.$down = $("<span> </span>").prependTo(this.$selected);
        this.transition = Transitions[this.opts.transition].call(this);

    };

    DropTree.prototype.removeNode = function (param, val) {
        var tree = $.fn.zTree.getZTreeObj(this.id + "_tree");
        var node = tree.getNodeByParam(param, val, null);
        tree.removeNode(node);
    };

    DropTree.prototype.destroy = function () {
        $.fn.zTree.getZTreeObj(this.id + "_tree").destroy();
        $("#" + this.id + "_tree").remove();
        this.$selected.remove();
        this.$target.unwrap();
        this.$target.show();
        this.$target.removeData("droptree");
    };


    var Transitions = {
        mfs: function () {
            var mfsId = this.id + "_mfs";
            this.$options = $('<ul class="mfs-options" id="' + mfsId + '"/>').insertAfter(this.$selected);
            var idLabel = this.opts.idLabel;
            var textLabel = this.opts.textLabel;
            var $options = this.$options;
            //var (this.id); 
            $.each(this.opts.items, function (i, n) {
                var $op = $('<a href="#" index="' + i + '">' + n[textLabel] + '</a>').wrap('<li class="mfs-option">').parent();
                $options.prepend($op);
            });

            //添加活力 
            var enableMagic = function (theContainer) {
                //TODO 可配置 
                var selectElm = theContainer.find('select');
                var selectElmOptions = selectElm.find('option');
                var optionList = theContainer.find('#' + mfsId);
                var optionListLi = optionList.find('li.mfs-option');
                var selectedOption = theContainer.find('a.mfs-selected-option');
                var optionListOptions = optionList.find('a');

                optionList.hide();
                optionListOptions.click(function () {
                    optionListLi.removeClass('active').removeClass('selected');
                    $(this).closest('li').addClass('selected');
                    selectedOption.html($(this).text() + '<span> </span>');
                    selectElmOptions.removeAttr('selected');
                    selectElmOptions.eq($(this).attr('index')).prop('selected', 'selected');
                    optionList.hide();

                    // Make a refresh function that just updates the select magic (destroy and re-enable) 
                    if (selectElm.selectedIndex != $(this).attr('index') && selectElm.onchange) {
                        selectElm.selectedIndex = $(this).attr('index');
                        selectElm.onchange();
                    }
                    if (selectElm.selectedIndex != $(this).attr('index')) {
                        selectElm.selectedIndex = $(this).attr('index');
                        selectElm.trigger('change');
                    }

                    return false;
                });

                selectedOption.click(function () {

                    var optionListAll = $('#' + mfsId);
                    if (optionList.is(':visible')) {
                        optionList.hide();
                        mfsSelectOpen = true;
                    }
                    else {
                        optionListLi.removeClass('active');
                        optionListAll.hide();
                        optionList.show();
                        var optionListSelected = optionList.find('li.mfs-option.selected');
                        if (optionListSelected.length > 0) {
                            optionListSelected.addClass('active');
                        }
                        else {
                            optionList.find('li.mfs-option:first-child').addClass('active');
                        }
                        mfsSelectOpen = optionList;
                    }
                    $(this).blur();
                    return false;
                });

                optionListLi.mouseover(function () {
                    optionListLi.removeClass('active');
                    $(this).addClass('active');
                });
            }; //end enableMagic     

            enableMagic(this.$wrap);
        },

        ztree: function () {
            var treeId = this.id + "_tree";
            //<ul id="treeDemo" class="ztree"></ul> 
            this.$options = $('<ul id="' + treeId + '" class="mfs-options ztree">').insertAfter(this.$selected);
            var theContainer = this.$wrap;
            var optionList = theContainer.find('#' + treeId);
            var selectedOption = theContainer.find('a.mfs-selected-option');
            var srcElem = this.target;
            var idLabel = this.opts.idLabel;
            var textLabel = this.opts.textLabel;
            var zTreeOnClick = function (event, treeId, treeNode) {
                selectedOption.html(treeNode[textLabel] + '<span> </span>');//span 为下拉箭头占位符 
                srcElem.value = treeNode[idLabel];
                optionList.hide();
            };

            var setting = {
                data: {
                    simpleData: {
                        enable: true,
                        idKey: this.opts.idLabel,
                        pIdKey: this.opts.pidLabel
                    },
                    key: {
                        name: this.opts.textLabel,
                        isHidden: "isHidden"
                    }
                },
                callback: {
                    onClick: zTreeOnClick
                }
            };
            //$(this.opts.items).each(function () {
            //    this['open'] = true;
            //});
            this.oper = $.fn.zTree.init($("#" + treeId), setting, this.opts.items);
            //设置默认值 
            var nodes = this.oper.getNodesByParam(idLabel, this.value, null);
            if (nodes.length > 0) {
                var nodeName = (nodes[0])[this.opts.textLabel];
                selectedOption.html(nodeName + '<span> </span>');//span 为下拉箭头占位符 
                this.oper.selectNode(nodes[0], true);
            }
            var enableMagic = function (theContainer) {
                var selectedOption = theContainer.find('a.mfs-selected-option');
                optionList.hide();
                selectedOption.click(function () {
                    if (optionList.is(':visible')) {
                        optionList.hide();
                    }
                    else {
                        optionList.show();
                    }
                    $(this).blur();
                    return false;
                });
            }//end enableMagic 
            enableMagic(this.$wrap);
        }
    };

    $.fn.droptree = function (option) {        
        var value,
            args = Array.prototype.slice.call(arguments, 1);

        this.each(function () {
            var $this = $(this),
                data = $this.data('droptree'),
                options = $.extend({}, defaults, $this.data(), typeof option === 'object' && option);

            if (typeof option === 'string') {               
                if (!data) {
                    return;
                }
                value = data[option].apply(data, args);
            }

            if (!data) {
                $.data(this, 'droptree', new DropTree(this, options));
            }
        });
        return typeof value === 'undefined' ? 'undefined' : value;
    };
})(jQuery);